<template>
    <layout>
        <div class='wrapper'>
            <van-form @submit="onSubmit" ref="form">
                <van-field
                    name="company"
                    label="单位名称"
                    v-model="formData.company"
                    placeholder="请输入单位名称"
                    required
                    clearable
                    :rules="[{required:true,message:'请输入单位名称'}]">

                </van-field>
                <van-field
                    name="billNo"
                    label="税号"
                    v-model="formData.billNo"
                    placeholder="请输入税号"
                    clearable
                    required
                    :rules="[{required:true,message:'请输入税号'}]">

                </van-field>
                <van-field
                    name="fullName"
                    label="姓名"
                    v-model="formData.fullName"
                    placeholder="请输入姓名"
                    clearable
                    required
                    :rules="[{required:true,message:'请输入姓名'}]">

                </van-field>
                <van-field
                    name="idCard"
                    label="身份证"
                    v-model="formData.idCard"
                    placeholder="请输入身份证"
                    required
                    clearable
                    :rules="[{required:true,message:'请输入身份证'},{validator:$Utils.validateIdCard(formData,'idCard'),message:'身份证格式错误'}]">

                </van-field>

                <van-field
                    class="amount"
                    name="amount"
                    label="开票金额"
                    type="number"
                    readonly
                    :value="formData.amount"
                    placeholder="点击右侧查询"
                    required
                    :rules="[{required:true,message:'请查询开票金额'}]">
                    <template #button>
                        <van-button class="search-btn" size="small" type="primary" native-type="button" @click="refresh()">查询</van-button>
                    </template>
                </van-field>
                <div class="tip">输入姓名、身份证后可点击查询开票金额</div>

                <van-field
                    name="email"
                    label="邮箱"
                    v-model="formData.email"
                    placeholder="请输入邮箱"
                    required
                    :rules="[{required:true,message:'请输入邮箱'}]">

                </van-field>
                <van-field
                    name="phone"
                    label="联系方式"
                    v-model="formData.phone"
                    placeholder="请输入联系电话"
                    required
                    type="tel"
                    :rules="[{ required: true, message: '请填写手机号' },{pattern:/^\d{11}$/,message:'手机号格式错误'}]">

                </van-field>
                
                
               
                <van-field
                    name="remark"
                    label="备注"
                    v-model="formData.remark"
                    placeholder="备注">

                </van-field>
                <div class="explain">
                    开票说明: 本页内容除备注外皆为必填项。
                    如需多人开票，请填写完整姓名，用逗号隔开。
                    申请后，发票将会在一到两个工作日，发送至邮箱，请注意查收。
                    如未收到，请联系客服。客服热线: 400-1512-686
                </div>
                <div class="btn">
                    <van-button block type="info" round>提 交</van-button>
                </div>
            </van-form>
           

        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import checkInvoiceApi from '@/api/checkInvoice';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            formData:{
                company:"",
                billNo:"",
                fullName:"",
                phone:"",
                email:"",
                idCard:"",
                amount:"",
                remark:"",
                areaId:"",
            }
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        init(){
            if(this.$route.query.state) this.formData.areaId = this.$route.query.state;
        },
        refresh(){
            // 只验证这两个
            
            this.$refs.form.validate(["fullName","idCard"])
                .then(res=>{
                    this.formData.fullName = this.formData.fullName.replace(/\s/g,"")
                    this.formData.idCard = this.formData.idCard.replace(/\s/g,"")
                    let params = {
                        fullName:this.formData.fullName,
                        idCard:this.formData.idCard.toUpperCase()
                    }
                    checkInvoiceApi.getOneDataAmountMoney(params)
                        .then(res=>{
                            if(res.status==0){
                                if(!res.data||res.data<0){
                                    this.$dialog.alert({
                                        title:"提示",
                                        message:"暂无可开票金额"
                                    })
                                    this.formData.amount = ""
                                }else{
                                    this.formData.amount = res.data
                                }
                            }else{
                                this.$dialog.alert({
                                    title:"提示",
                                    message:res.msg
                                })
                            }
                        })
                })  
        },
        onSubmit(){
            if(!this.formData.areaId) this.formData.areaId = 430100
            this.formData.fullName = this.formData.fullName.replace(/\s/g,"")

            let params = {
                company:this.formData.company,
                billNo:this.formData.billNo,
                fullName:this.formData.billNo,
                phone:this.formData.phone,
                email:this.formData.email,
                idCard:this.formData.idCard.toUpperCase(),
                amount:this.formData.amount,
                remark:this.formData.remark,
                areaId:this.formData.areaId
            }
            const loading = this.$toast({
                type:"loading",
                duration:0,
                message:"提交中请稍等"
            })
            // return 
            checkInvoiceApi.billOpenRecord(params)
                .then(res=>{
                    if(res.status==0){
                        this.formData.fullName = ""
                        this.formData.idCard = ""
                        this.formData.amount = "",
                        this.formData.phone = ""
                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:"申请失败，请重试或联系工作人员"
                        })
                    }
                    loading.close()
                })
                .catch(err=>{
                    this.$dialog.alert({
                        title:"错误",
                        message:err
                    })
                    loading.close()
                })
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init()
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        box-shadow: 0 0 12px rgba(0,0,0,10%);
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        .amount{
            // display: flex;
            align-items: center;
            .search-btn{
                width:50px;
                height: 27px;
                transform: translateY(-3px);
            }
        }
       
        .tip{
            font-size: 14px;
            padding: 10px 15px; 
            color: red;
        }
        .btn{
            padding: 20px;
        }
        .explain{
            color: #999999;
            text-indent: 2em;
            letter-spacing: 1px;
            padding: 13px;
            font-size: 13px;
        }
    }
</style>